<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片拼接工具</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="theme-switch">
            <button id="theme-toggle" class="theme-toggle-btn" aria-label="切换主题">
                <svg class="sun-icon" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 3a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V4a1 1 0 0 1 1-1zm0 15a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1zm9-9a1 1 0 0 1-1 1h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1zM4 12a1 1 0 0 1-1 1H2a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1zm15.7-7.3a1 1 0 0 1 0 1.4l-.7.7a1 1 0 1 1-1.4-1.4l.7-.7a1 1 0 0 1 1.4 0zM6.3 19.7a1 1 0 0 1 0-1.4l.7-.7a1 1 0 1 1 1.4 1.4l-.7.7a1 1 0 0 1-1.4 0zM4.3 4.3a1 1 0 0 1 1.4 0l.7.7a1 1 0 1 1-1.4 1.4l-.7-.7a1 1 0 0 1 0-1.4zm15.4 15.4a1 1 0 0 1-1.4 0l-.7-.7a1 1 0 1 1 1.4-1.4l.7.7a1 1 0 0 1 0 1.4zM12 6a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/>
                </svg>
                <svg class="moon-icon" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 3z"/>
                </svg>
            </button>
        </div>
        <h1>图片拼接工具</h1>
        <div class="upload-area">
            <div class="upload-container">
                <input type="file" id="file-input" multiple accept="image/*">
                <label for="file-input" class="upload-button">选择图片（最多8张）</label>
                <span class="drag-tip">拖拽图片可修改排序</span>
            </div>
        </div>
        <div class="preview-area"></div>
        <button id="stitch-btn" disabled>开始拼接</button>
        <div class="result-area"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>